<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<uni-nav-bar>
			<view class="bar-left" slot="left"><navigator url="/" class="iconfont icon-bilibili"></navigator></view>
			<view class="bar-right" slot="right">
				<navigator url="" class="iconfont icon-sousuo"></navigator>
				<navigator class="login"><image src="../../static/login.png" mode=""></image></navigator>
				<navigator class="downlink">下载APP</navigator>
			</view>
		</uni-nav-bar>
		<!-- tabbar导航栏 -->
		<strong>
			<template>
				<view class="tabs">
					<!-- 一级分类 -->
					<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
						<view v-for="(tab, index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
							<text class="uni-tab-item-title" :class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{ tab.name }}</text>
						</view>
					</scroll-view>
					<view class="line-h"></view>
					<!-- 二级分类 -->
					<block v-if="tabBars1.length>0">
						<scroll-view id="tab-bar1" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto1">
							<view v-for="(tab1, index1) in tabBars1" :key="tab1.id" class="uni-tab-item" :id="tab1.id" :data-current="index1" @click="ontabtap1">
								<text class="uni-tab-item-title" :class="tabIndex1 == index1 ? 'uni-tab-item-title-active' : ''">{{ tab1.name }}</text>
							</view>
						</scroll-view>
						<view class="line-h"></view>
					</block>
					<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
						<swiper-item class="swiper-item" v-for="(tab, index1) in newsList" :key="index1">
							<!-- #ifdef APP-NVUE -->
							<list class="scroll-v list" enableBackToTop="true" scroll-y loadmoreoffset="15" @loadmore="loadMore(index1)">
								<refresh class="refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
									<div class="refresh-view">
										<image
											class="refresh-icon"
											:src="refreshIcon"
											:style="{ width: tab.refreshing || pulling ? 0 : '30px' }"
											:class="{ 'refresh-icon-active': tab.refreshFlag }"
										></image>
										<loading-indicator class="loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
										<text class="loading-text">{{ tab.refreshText }}</text>
									</div>
								</refresh>
								<cell v-for="(newsitem, index2) in tab.data" :key="newsitem.id">111</cell>
								<cell class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
									<text class="loading-more-text">{{ tab.loadingText }}</text>
								</cell>
							</list>
							<!-- #endif -->
							<!-- #ifndef APP-NVUE -->
							<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
								<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">222</view>
								<view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
									<text class="loading-more-text">{{ tab.loadingText }}</text>
								</view>
							</scroll-view>
							<!-- #endif -->
						</swiper-item>
					</swiper>
				</view>
			</template>
		</strong>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;

const newsData = {
	data0: {
		datetime: '40分钟前',
		article_type: 0,
		title: 'uni-app行业峰会频频亮相，开发者反响热烈!',
		source: 'DCloud',
		comment_count: 639
	},
	data1: {
		datetime: '一天前',
		article_type: 1,
		title: 'DCloud完成B2轮融资，uni-app震撼发布!',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		source: 'DCloud',
		comment_count: 11395
	},
	data2: {
		datetime: '一天前',
		article_type: 2,
		title: '中国技术界小奇迹：HBuilder开发者突破200万',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
		source: 'DCloud',
		comment_count: 11395
	},
	data3: {
		article_type: 3,
		image_list: [
			{
				url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
				width: 563,
				height: 316
			},
			{
				url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
				width: 641,
				height: 360
			},
			{
				url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
				width: 640,
				height: 360
			}
		],
		datetime: '5分钟前',
		title: 'uni-app 支持使用 npm 安装第三方包，生态更趋丰富',
		source: 'DCloud',
		comment_count: 11
	},
	data4: {
		datetime: '2小时前',
		article_type: 4,
		title: 'uni-app 支持原生小程序自定义组件，更开放、更自由',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		source: 'DCloud',
		comment_count: 69
	}
};
export default {
	data() {
		return {
			newsList: [],
			cacheTab: [],
			tabIndex: 0,
			tabIndex1: 0,
			tabBars: [
				{
					name: '首页',
					id: 'guanzhu'
				},
				{
					name: '推荐',
					id: 'tuijian'
				},
				{
					name: '体育',
					id: 'tiyu'
				},
				{
					name: '热点',
					id: 'redian'
				},
				{
					name: '财经',
					id: 'caijing'
				},
				{
					name: '娱乐',
					id: 'yule'
				},
				{
					name: '军事',
					id: 'junshi'
				},
				{
					name: '历史',
					id: 'lishi'
				},
				{
					name: '本地',
					id: 'bendi'
				}
			],
			tabBars1: [],
			scrollInto: '',
			scrollInto1: '',
			showTips: false,
			pulling: false
		};
	},
	onLoad() {
		setTimeout(() => {
			this.tabBars.forEach(tabBar => {
				this.newsList.push({
					data: [],
					isLoading: false,
					refreshText: '',
					loadingText: '加载更多...'
				});
			});
			this.getList(0);
		}, 350);
	},
	methods: {
		getList(index) {
			let activeTab = this.newsList[index];
			let list = [];
			activeTab.data = activeTab.data.concat(list);
		},
		loadMore(e) {
			setTimeout(() => {
				this.getList(this.tabIndex);
			}, 500);
		},
		// 一级TabBar
		// 点击事件
		ontabtap(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.tabIndex1 = 0 // 二级分类恢复初始
			this.scrollInto1 = 'guanzhu'
			this.switchTab(index);
			this.getTwoClassify()
		},
		// 滑动事件
		ontabchange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
			this.getTwoClassify()
		},
		switchTab(index) {
			if (this.newsList[index].data.length === 0) {
				this.getList(index);
			}
			if (this.tabIndex === index) {
				return;
			}

			// 缓存 tabId
			if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
				let isExist = this.cacheTab.indexOf(this.tabIndex);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex);
					//console.log("cache index:: " + this.tabIndex);
				}
			}

			this.tabIndex = index;
			this.scrollInto = this.tabBars[index].id;

			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		},
		// 二级TabBar
		// 点击事件
		ontabtap1(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab1(index);
		},
		// 滑动事件
		ontabchange1(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab1(index);
		},
		switchTab1(index) {
			if (this.newsList[index].data.length === 0) {
				this.getList(index);
			}
			if (this.tabIndex1 === index) {
				return;
			}
		
			// 缓存 tabId
			if (this.newsList[this.tabIndex1].data.length > MAX_CACHE_DATA) {
				let isExist = this.cacheTab.indexOf(this.tabIndex1);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex1);
					//console.log("cache index:: " + this.tabIndex);
				}
			}
		
			this.tabIndex1 = index;
			this.scrollInto1 = this.tabBars[index].id;
		
			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		},
		// 获取二级分类
		getTwoClassify(id) {
			// 1.发送请求
			let data = [
				{
					name: '推荐',
					id: '1001'
				},
				{
					name: 'MAD·AMV',
					id: '1002'
				},
				{
					name: 'MMD·3D',
					id: '1003'
				},
				{
					name: '短片·手书·配音',
					id: '1004'
				},
				{
					name: '手办·模玩',
					id: '1005'
				},
				{
					name: '手办·模玩',
					id: '1006'
				}
			]
			if (data.length>0) {
				this.tabBars1 = data
			} else {
				this.tabBars1 = []
			}
		},
		clearTabData(e) {
			this.newsList[e].data.length = 0;
			this.newsList[e].loadingText = '加载更多...';
		},
		refreshData() {},
		onrefresh(e) {
			var tab = this.newsList[this.tabIndex];
			if (!tab.refreshFlag) {
				return;
			}
			tab.refreshing = true;
			tab.refreshText = '正在刷新...';

			setTimeout(() => {
				this.refreshData();
				this.pulling = true;
				tab.refreshing = false;
				tab.refreshFlag = false;
				tab.refreshText = '已刷新';
				setTimeout(() => {
					// TODO fix ios和Android 动画时间相反问题
					this.pulling = false;
				}, 500);
			}, 2000);
		},
		onpullingdown(e) {
			var tab = this.newsList[this.tabIndex];
			if (tab.refreshing || this.pulling) {
				return;
			}
			if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
				tab.refreshFlag = true;
				tab.refreshText = '释放立即刷新';
			} else {
				tab.refreshFlag = false;
				tab.refreshText = '下拉可以刷新';
			}
		},
	}
};
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.bar-left {
		margin-left: 10rpx;
		.icon-bilibili {
			font-size: 56rpx;
			color: #fc6f96;
		}
	}
	.bar-right {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		.icon-sousuo {
			color: #bcbdbc;
			font-size: 40rpx;
		}
		.login {
			margin: 0 40rpx;
			image {
				width: 48rpx;
				height: 48rpx;
				display: block;
			}
		}
		.downlink {
			width: 164rpx;
			height: 48rpx;
			background: #fc6f96;
			color: #ffffff;
			line-height: 48rpx;
			text-align: center;
			border-radius: 6rpx;
		}
	}
	// tabbar部分样式
	.tabs .uni-tab-item-title-active {
		color: #fc6f96;
	}
	.tabs .uni-tab-item {
		position: relative;
	}
	.tabs .uni-tab-item-title-active:before {
		content: "";
		width: 60rpx;
		height: 4rpx;
		background-color: #fc6f96;
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.uni-tab-item-title {
		font-weight: 500;
	}
	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.line-h {
		height: 1rpx;
		background-color: #e7e7e7;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		float: left;
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007aff;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.update-tips {
		position: absolute;
		left: 0;
		top: 41px;
		right: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #fddd9b;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.update-tips-text {
		font-size: 14px;
		color: #ffffff;
	}

	.refresh {
		width: 750rpx;
		height: 64px;
		justify-content: center;
	}

	.refresh-view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 30px;
		height: 30px;
		transition-duration: 0.5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}
}
</style>
